<template>
  <b-fullpage class="confirm" title="订单确认">
    <div class="confirm_address">
      <van-contact-card style="font-size:12px;padding:5px 16px;margin-bottom:1em" type="edit" 
      :tel="address.telephone" 
      :name="address.realname+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+'地址：'+address.city+address.area+address.address" 
      @click="$router.push('/address')" />
    </div>
    <div v-if="JSON.stringify(order.orderLines)!='[]'">
      <van-card v-for="(item,index) in order.orderLines" :key="index"
        :num="item.num"
        :price="item.price"
        :desc="item.description"
        :title="item.name"
        :thumb="item.photo"
      >
      <!-- <template #tags>
        <van-tag plain type="danger">标签</van-tag>
        <van-tag plain type="danger">标签</van-tag>
      </template> -->
      <template #footer>
        <van-button @click="addHandler(index)" size="mini">+1</van-button>
        <van-button @click="delHandler(index)" size="mini">-1</van-button>
      </template>
    </van-card>
    <br>
    <van-field
      v-model="buyerMessage"
      rows="3"
      autosize
      label="备注："
      type="textarea"
      placeholder="请输入备注"
    />
    
    <div style="margin:1em">
       总价 ￥： <span style="color:red;">{{order.total}} 元</span>
      <van-button style="float:right" @click="submitOrderHandler" size="small" type="danger">提交订单</van-button>
    </div>
    </div>
    <div style="text-align:center;margin-top:1em" v-else>
      暂无购买商品，请回到首页选择商品<br>
      <van-button style="margin:1em auto" @click="backHandler" size="small" type="success">返回</van-button>
    </div>
  </b-fullpage>
</template>
<script>
import { useRoute, useRouter } from 'vue-router'
import { onMounted,ref,computed } from 'vue'
import { useStore } from 'vuex'
import { get, postJSON } from '../../../utils/request'
import { Toast } from 'vant'
export default {
  setup() {
    let route = useRoute();
    let router = useRouter(); // 使用路由
    let store = useStore(); // 使用状态机
    let orderLines = ref([]); // 存储跳转传递过来的数据
    let user_info = computed(()=>store.state.user.user_info);  // 从状态机获取到用户信息
    let address = ref({});  // 存储用户默认地址信息
    let buyerMessage = ref(''); // 用户备注信息
    // 获取用户默认地址
    let loadDefaultAddress = async ()=>{
      let resp = await get('/app/address/queryDefaultAddress',{userId:user_info.value.id});
      if(JSON.stringify(resp.data) != '[]'){
        address.value = resp.data;
      }
    }
    // 计算用户、商品信息
    let order = computed(()=>{
      let data = {};
      data.customerId = user_info.value.id;  // 买家id
      data.addressId = address.value.id;  // 买家地址id
      let total = 0;
      orderLines.value.forEach(item=>{
        total += item.price * item.num;  // 商品总价
      });
      data.total = total;
      data.buyerMessage = buyerMessage.value;  // 买家留言
      // 过滤掉商品数量为0的商品
      orderLines.value = orderLines.value.filter(item=>item.num>0);
      data.orderLines = orderLines.value.map(item=>{
        // if(item.num==0){
        //   return {}
        // }
        return {
          name:item.name,
          num:item.num,
          price:item.price,
          photo:item.photo,
          productId:item.id,
          description:item.description
        }
      })
      return data;
    });
    // +1处理函数
    let addHandler = (index)=>{
      orderLines.value[index].num++;
    }
    // -1处理函数
    let delHandler = (index)=>{
      orderLines.value[index].num--;
      console.log(index,orderLines.value[index].num);
    }
    // 提交保存订单处理函数
    let submitOrderHandler = () => {
      let resp = postJSON('/app/order/submitOrder',order.value);
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
      setTimeout(()=>{
        Toast.clear();
        router.push("/home/orders");
      },1000)
    }
    // 无商品，返回操作函数
    let backHandler = ()=>{
      router.back()
    }
    onMounted(async ()=>{
      orderLines.value = JSON.parse(route.params.orderLines);
      await loadDefaultAddress();
    })
    return {
      address,
      buyerMessage,
      order,
      addHandler,
      delHandler,
      submitOrderHandler,
      backHandler,
    }
  },
}
</script>
<style lang="scss" scoped>
.confirm{
  background-color: rgb(239,239,239);
}
</style>